{include file="public/header" /}
<style type="text/css">
    .js-article-del{
        color:#e74c3c;
    }
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:;">文章列表</a></li>
        <li><a href="{:url('article/articleOperate',array('action' => 'add'))}">添加文章</a></li>
    </ul>
    <form class="js-ajax-form" action="{:url('article/index')}" method="post">
        <div class="well form-inline margin-top-20">
            所属栏目:
            <select class="form-control" name="categoryId" style="width: 200px;">
                <option value='0'>全部</option>
                {foreach name="categoryList" item="vo"}
                    <option value='{$vo.id}' {if condition="$params['categoryId'] eq $vo['id']" } selected="selected" {/if} >{$vo.name}</option>
                    {foreach name="$vo['children']" item="vo2"}
                        <option value='{$vo2.id}' {if condition="$params['categoryId'] eq $vo2['id']" } selected="selected" {/if} >└────{$vo2.name}</option>
                    {/foreach}
                {/foreach}
            </select>
            关键字:
            <input type="text" class="form-control" name="keyword" style="width: 200px;"
                   value="{$params['keyword']|default=''}" placeholder="请输入关键字...">
            <input type="submit" class="btn btn-primary" value="搜索"/>
        </div>
        <table class="table table-hover table-bordered table-list">
            <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>分类名称</th>
                <th>缩略图</th>
                <th>排序</th>
                <th>状态</th>
                <th>更新时间</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            {foreach name="list" item="vo"}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.title}</td>
                <td>{$vo.categoryName}</td>
                <td>
                    {empty name="$vo['thumbImage']"}
                    <img src="/assets/images/default-thumbnail.png" width="50"/>
                    {else /}
                    <img src="{$vo.thumbImage}" width="50"/>
                    {/empty}
                </td>
                <td>
                    <input type="text" value="{$vo.sort}" class="input-order valid js-sort" data-id="{$vo.id}"/>
                </td>
                <td>
                    {if condition="$vo['status'] eq '1'"}
                        <span style="color: #18bc9c;">启用</span>
                    {else /}
                        <span style="color: #e74c3c;">禁用</span>
                    {/if}
                </td>
                <td>{$vo.modifyTime}</td>
                <td>{$vo.createTime}</td>
                <td>
                    <a href="{:url('article/articleOperate',array('action'=>'edit','id'=>$vo['id']))}">编辑</a>　
                    <a href="javascript:void(0)" class="js-article-del" data-id="{$vo.id}">删除</a>
                </td>
            </tr>
            {/foreach}
        </table>
        {:$pagination}
    </form>
</div>
<script src="/static/admin/js/layer/layer.js"></script>
<script>
    $(function () {
        $(".js-article-del").click(function () {
            var id = $(this).data('id')|| 0;
            layer.confirm("您确定要删除该篇文章吗？", {
                btn:['确认','取消'],
                success:function(){
                    this.enterEsc = function (event) {
                        if (event.keyCode === 13) {
                            $(".layui-layer-btn0").click();
                            return false;
                        }
                    };
                    $(document).on('keydown', this.enterEsc);

                    $(".layui-layer-btn0").on("click",function() {
                        $.post("{:url('article/articleDel')}", {id:id}, function (res) {
                            if(res.errorCode === 200){
                                window.location.reload();
                            }else{
                                layer.alert(res.message, {
                                    title: '提示',
                                    icon: 2
                                });
                            }
                        },'json');
                        return false
                    })
                },
                end:function(){
                    $(document).off('keydown',this.enterEsc);
                }
            });
        });

        $(".js-sort").blur(function () {
            var sort = this.value;
            var id = $(this).data('id');
            $.post("{:url('article/updateArticleSort')}", {id:id,sort:sort}, function (res) {
                if(res.errorCode === 200){
                    layer.confirm(res.message, {
                        btn:['确认','取消'],
                        success:function(){
                            this.enterEsc = function (event) {
                                if (event.keyCode === 13) {
                                    $(".layui-layer-btn0").click();
                                    return false;
                                }
                            };
                            $(document).on('keydown', this.enterEsc);

                            $(".layui-layer-btn0").on("click",function() {
                                window.location.reload();
                                return false
                            })
                        },
                        end:function(){
                            $(document).off('keydown',this.enterEsc);
                        }
                    });
                }else{
                    layer.alert(res.message, {
                        title: '提示',
                        icon: 2
                    });
                }
            },'json');
            return false;
        });
    });
</script>
</body>
</html>